<template>
	<a-spin :spinning="loadSpinning">
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical"
			:label-col="{ ...layout.labelCol, offset: 0 }" :wrapper-col="{ ...layout.wrapperCol, offset: 0 }">
			<a-form-item label="支付宝网关" name="SYS_PAY_ALI_GATEWAY_URL">
				<a-input v-model:value="formData.SYS_PAY_ALI_GATEWAY_URL" placeholder="请输入支付宝网关" />
			</a-form-item>
			<a-form-item label="应用ID" name="SYS_PAY_ALI_APP_ID">
				<a-input v-model:value="formData.SYS_PAY_ALI_APP_ID" placeholder="请输入APP_ID" />
			</a-form-item>
			<a-form-item label="商户PID" name="SYS_PAY_ALI_SELLER_ID">
				<a-input v-model:value="formData.SYS_PAY_ALI_SELLER_ID" placeholder="请输入SELLER_ID" />
			</a-form-item>

			<a-form-item label="商户私钥" name="SYS_PAY_ALI_MERCHANT_PRIVATE_KEY">
				<a-input v-model:value="formData.SYS_PAY_ALI_MERCHANT_PRIVATE_KEY" placeholder="请输入商户私钥" />
			</a-form-item>
			<a-form-item label="支付宝公钥" name="SYS_PAY_ALI_PUBLIC_KEY">
				<a-input v-model:value="formData.SYS_PAY_ALI_PUBLIC_KEY" placeholder="请输入支付宝公钥" />
			</a-form-item>
			<a-form-item label="接口内容加密密钥" name="SYS_PAY_ALI_CONTENT_KEY">
				<a-input v-model:value="formData.SYS_PAY_ALI_CONTENT_KEY" placeholder="请输入接口内容加密密钥" />
			</a-form-item>
			<a-form-item label="同步通知页面" name="SYS_PAY_ALI_RETURN_URL">
				<a-input v-model:value="formData.SYS_PAY_ALI_RETURN_URL" placeholder="请输入同步通知页面" />
			</a-form-item>
			<a-form-item label="异步通知页面" name="SYS_PAY_ALI_NOTIFY_URL">
				<a-input v-model:value="formData.SYS_PAY_ALI_NOTIFY_URL" placeholder="请输入异步通知页面" />
			</a-form-item>
			<a-form-item>
				<a-button type="primary" :loading="submitLoading" @click="onSubmit()">保存</a-button>
				<a-button style="margin-left: 10px" @click="() => formRef.resetFields()">重置</a-button>
			</a-form-item>
		</a-form>
	</a-spin>
</template>

<script setup name="aliPayForm">
import configApi from '@/api/dev/configApi';
import { required } from '@/utils/formRules';
import { message } from 'ant-design-vue';
import { cloneDeep } from 'lodash-es';

const formRef = ref()
const formData = ref({})
const submitLoading = ref(false)
const loadSpinning = ref(true)

// 查询此界面的配置项,并转为表单
const param = {
	category: 'PAY_ALI'
}
configApi.configList(param).then((data) => {
	loadSpinning.value = false
	if (data) {
		data.forEach((item) => {
			formData.value[item.configKey] = item.configValue
		})
	} else {
		message.warning('表单项不存在，请初始化数据库')
	}
})

// 默认要校验的
const formRules = {
	SYS_PAY_ALI_APP_ID: [required('请输入应用Id')],
	SYS_PAY_ALI_SELLER_ID: [required('请输入商户PID')],
	SYS_PAY_ALI_GATEWAY_URL: [required('请输入支付宝网关')],
	SYS_PAY_ALI_MERCHANT_PRIVATE_KEY: [required('请输入商户私钥')],
	SYS_PAY_ALI_PUBLIC_KEY: [required('请输入支付宝公钥')],
	SYS_PAY_ALI_CONTENT_KEY: [required('请输入接口内容加密密钥')],
	SYS_PAY_ALI_RETURN_URL: [required('请输入同步通知页面')],
	SYS_PAY_ALI_NOTIFY_URL: [required('请输入异步通知页面')],
}
// 验证并提交数据
const onSubmit = () => {
	formRef.value.validate().then(() => {
		submitLoading.value = true
		let submitParam = cloneDeep(formData.value)
		const param = Object.entries(submitParam).map((item) => {
			return {
				configKey: item[0],
				configValue: item[1]
			}
		})
		configApi
			.configEditForm(param)
			.then(() => { })
			.finally(() => {
				submitLoading.value = false
			})
	})
}
const layout = {
	labelCol: {
		span: 4
	},
	wrapperCol: {
		span: 12
	}
}
</script>
